<script setup>
import { ref } from "vue";
import { productListService } from "@/api/FleaMarket.js";
import { ElMessage, ElMessageBox } from "element-plus";

// 响应数据模型
const products = ref([]);
const pageNum = ref(1); // 当前页
const total = ref(20); // 总条数
const pageSize = ref(5); // 每页条数

//----------------获取商品列表数据------------------
const getProducts = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    categoryId: 2,
    approvalStatus: 2,
  };
  let result = await productListService(params);
  total.value = result.data.total;
  products.value = result.data.items;
};
getProducts();

// 分页条数据模型
const onSizeChange = (size) => {
  pageSize.value = size;
  getProducts();
}; // 修改每页条数
const onCurrentChange = (num) => {
  pageNum.value = num;
  getProducts();
}; // 修改当前页

// // 增加一些测试数据
// for (let i = 0; i < 10; i++) {
//   products.value.push({
//     title: "",
//     content: `商品${i + 1}`,
//     image: `https://via.placeholder.com/150?text=Product${i + 1}`,
//     price: `${Math.floor(Math.random() * 100)}`,
//   });
// }

//----------------------显示商品详情-------------------------
const showProductDetail = (product) => {
  const { title, content, price, image } = product;

  const imgElement = document.createElement("img");
  imgElement.src = image;
  imgElement.style.maxWidth = "100%";
  imgElement.style.maxHeight = "100%";

  const message = document.createElement("div");
  message.classList.add("product-detail-content");
  message.innerHTML = `
    <h2>商品名称：${title}</h2>
    <p>商品描述：${content}</p>
    <p>价格：${price}</p>
  `;

  message.appendChild(imgElement);

  ElMessageBox({
    title: "商品详情",
    dangerouslyUseHTMLString: true,
    message: message.outerHTML,
    showCancelButton: false,
    showConfirmButton: true,
    confirmButtonText: "关闭",
    customClass: "product-detail-message-box",
  });
};
</script>

<!-- ================================================================================================== -->
<!-- **************************************************************************************************** -->
<!-- ================================================================================================== -->

<template>
  <el-card>
    <el-row :gutter="20">
      <el-col v-for="(product, index) in products" :key="index" :span="8">
        <!-- 商品信息卡片 -->
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <img :src="product.image" class="image" />
          <div style="padding: 14px">
            <div v-html="product.content"></div>
            <p style="font-size: 14px; margin-bottom: 12px">
              {{ product.title }}
            </p>
            <div class="bottom">
              <span class="price">{{ product.price }}</span>
              <el-button
                type="primary"
                size="small"
                @click="showProductDetail(product)"
                >查看详情</el-button
              >
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分页条 -->
    <el-pagination
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      :current-page="pageNum"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px"
    ></el-pagination>
  </el-card>
</template>

<!-- ================================================================================================== -->
<!-- **************************************************************************************************** -->
<!-- ================================================================================================== -->

<style scoped>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}

.el-card {
  margin-bottom: 20px;
}

.price {
  font-size: 16px;
  font-weight: bold;
}

.product-detail-message-box {
  max-width: 80%;
  margin: 20px auto;
}
</style>
